<script setup>
import { ref } from "vue";
import VueTree from "../VueD3Tree/index.vue";
import { fakeData1 } from "./fakeData";
import "./style.css";

const treeData = ref(fakeData1);

const treeRef = ref(null);
const zoomRatio = ref(1);
</script>

<template>
  <div class="demo-main">
    <div>
      <h3>默认鼠标滚动缩放</h3>
      <div class="canvas-container">
        <VueTree :data="treeData" default-node-key="name" />
      </div>
    </div>

    <div>
      <h2>手动缩放</h2>
      <button
        @click="
          () => {
            zoomRatio += 0.1;
            treeRef.zoom(zoomRatio);
          }
        "
      >
        放大
      </button>
      <button
        @click="
          () => {
            zoomRatio -= 0.1;
            treeRef.zoom(zoomRatio);
          }
        "
      >
        缩小
      </button>
      <button
        @click="
          () => {
            zoomRatio = 1;
            treeRef.zoom(zoomRatio);
          }
        "
      >
        还原
      </button>
      <div class="canvas-container">
        <VueTree 
          ref="treeRef" 
          :wheel-zoom="false" 
          :data="treeData" 
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.canvas-container {
  width: 700px;
  height: 300px;
  border-radius: 5px;
  border: 1px solid gray;
}
</style>
